<template>
  <div class="page-wrapper">
    <div id="search">
      <!-- 记录详情 -->
      <h1 class="main-title">查询条件</h1>
      <!-- 宿舍楼选择 -->
      <div class="main-card wrapper">
        <span class="label">宿舍楼</span>
        <el-select v-model="groupData.buildingId" placeholder="请选择" clearable>
          <el-option v-for="item in buildingsData" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>

        <span class="label">楼层</span>
        <el-select v-model="groupData.floorId" placeholder="请选择" :disabled="!groupData.buildingId" clearable>
          <el-option v-for="item in floorsData" :key="item.id" :label="item.layer" :value="item.id">
          </el-option>
        </el-select>

        <span class="label">房间</span>
        <el-select v-model="groupData.roomId" placeholder="请选择" :disabled="!groupData.floorId" clearable>
          <el-option v-for="item in roomsData" :key="item.id" :label="item.number" :value="item.id">
          </el-option>
        </el-select>

        <span class="label">姓名/学号</span>
        <el-input placeholder="请输入姓名或学号" v-model="keyword" clearable></el-input>
        <el-button type="primary" @click="searchStu">搜索</el-button>
        <el-button type="primary" @click="excuteReturn">退还</el-button>
      </div>
      <!-- 宿舍楼选择 -->
    </div>

    <!-- 记录详情 -->
    <h1 class="main-title">学生列表</h1>
    <div class="main-card wrapper">
      <RecordTable :tableData="tableData" type="clean" :tableLoading="tableLoading" :mutilSelect="true"
        @selectRowsOkRd="selectRowsOk" />
      <Pagination :total="count" :page="current" @pagination="handlePagination" :hidden="tableData.length === 0" />
    </div>
    <!-- 记录详情 -->
  </div>
</template>

<script>
import { getManageBuildings } from '@/api/building'
import { getFloors } from '@/api/floor'
import { getRooms } from '@/api/room'
import RecordSelector from '@/views/record-manage/components/RecordSelector'
import RecordTable from '@/components/RecordTable'
import Pagination from '@/components/Pagination'
import { getFenpeiedInfo, clearRoom } from '@/api/user'
export default {
  name: 'Returnback',
  components: {
    RecordSelector,
    RecordTable,
    Pagination
  },
  data() {
    return {
      searchOption: {},
      current: 1,
      count: 0,
      step: 10,
      tableData: [],
      tableLoading: false,
      buildingsData: [],
      floorsData: [],
      roomsData: [],
      groupData: {
        buildingId: null,
        floorId: null,
        roomId: null
      },
      keyword: null,
      selectRows: []
    }
  },
  watch: {
    'groupData.buildingId': function () {
      this.groupData.floorId = null
      this.groupData.roomId = null
      this.groupData.userId = null
      this.fetchFloorsData()
    },
    'groupData.floorId': function () {
      this.groupData.roomId = null
      this.groupData.userId = null
      this.fetchRoomsData()
    },
    'groupData.roomId': function () {
      this.groupData.userId = null
    },
    groupData: {
      deep: true,
      handler(newVal) {
        for (let key in this.selectorData) {
          this.selectorData[key] = newVal[key]
        }
      }
    }
  },
  mounted() {
    this.fetchBuildingsData()
    this.fetchTableData()
  },
  methods: {
    async fetchBuildingsData() {
      getManageBuildings().then(res => {
        this.buildingsData = res.data.buildings
      })
    },
    async fetchFloorsData() {
      getFloors({ buildingId: this.groupData.buildingId }).then(res => {
        this.floorsData = res.data.floors
      })
    },
    async fetchRoomsData() {
      getRooms({ floorId: this.groupData.floorId }).then(res => {
        this.roomsData = res.data.rooms
      })
    },
    excuteReturn() {
      this.$confirm('将为选中学生退还宿舍 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.tableLoading = true
        this.selectRows.forEach(stu => {
          clearRoom({
            userId: stu.id,
            roomId: null,
            checkTime: new Date()
          })
        })
      }).then(()=>{
        setTimeout(()=>{
        this.fetchTableData()
      },2000)
      })
    },
    requireSelect() {
      if (this.selectRows.length === 0) {
        this.$message({
          type: 'error',
          message: '请选择学生'
        })
        return false
      }
      return true
    },
    searchStu() {
      this.current = 1
      this.fetchTableData()
    },
    fetchTableData() {
      // 查询学生
      const params = {
        current: this.current,
        step: this.step,
        buildingId: this.groupData.buildingId,
        floorId: this.groupData.floorId,
        roomId: this.groupData.roomId,
        keyword: this.keyword
      }

      this.tableLoading = true
      getFenpeiedInfo(params)
        .then(res => {
          this.tableData = res.data.rows
          this.count = res.data.count
        })
        .finally(() => {
          this.tableLoading = false
        })
    },
    handlePagination({ page, limit }) {
      this.current = page
      this.step = limit
      this.fetchTableData()
    },
    selectRowsOk(selectRows) {
      this.selectRows = selectRows
    },
  }
}
</script>

<style lang="scss" scoped>
.wrapper {
  margin: 40px 0;
}

.el-select {
  margin: 10px 20px;
}

.el-input {
  margin: 10px 20px;
  width: 200px;
}
</style>
